<template>
	<view class="content">
		<view class="box">
			<view class="box_left">
				姓名
			</view>
			<view class="box_right">
				<input type="text" value="" v-model="user.consignee" placeholder="收件人姓名" />
			</view>
		</view>
		<view class="box">
			<view class="box_left">
				电话
			</view>
			<view class="box_right">
				<input type="number" maxlength="11" value="" v-model="user.phone"  placeholder="收件人手机号" />
			</view>
		</view>
		<view class="box">
			<view class="box_left">
			   地区
			</view>
			<view class="box_right">
				<view class='citybtn' @click="showMulLinkageThreePicker">{{pickerText}}</view>
				<view>
					<image src="../../static/xiala.png" mode="" ></image>
				</view>
				
			</view>
		</view>
		<view class="box">
			<view class="box_left">
				详细地址
			</view>
			<view class="box_right_right">
				<input type="text" value=""  v-model="user.details" placeholder="街道门牌,楼层房间号等信息" />
				<image src="../../static/address.png" mode="" @click="gosite"></image>
			</view>
		</view>
		<view class="box">
			<view class="box_left">
				地址定位
			</view>
			<view class="box_right_right" @click="openMap()">
				<text>{{mapAddressName}}</text>
				<image src="../../static/right-arrow.png" mode=""></image>
			</view>
		</view>
		<!-- <view class="box">
			<view class="box_left">
				身份证号
			</view>
			<view class="box_right">
				<input type="text" value="" v-model="IDcard" placeholder="身份证号码" />
			</view>
		</view> -->
		<view class="box">
			<view class="box_left_two">
				设为默认收件地址
			</view>
			<view class="box_right_two">
				<switch color="#D23535" style="transform:scale(0.8)" @change="switchBtn"/>
			</view>
		</view>
		<button class="btn" @click="submit">提交</button>
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>

<script>
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
	import eonfox from '@/components/eonfox/eonfox.js';
	import fns from '@/components/eonfox/fns.js';
	import QQMapWX from '@/components/eonfox/qqmap-wx-jssdk.js';
	var qqmapsdk
	var ef = new eonfox();
	export default {
		data() {
			return {
                cityPickerValueDefault: [0, 0, 1],
                themeColor: '#007AFF',
                pickerText: '选择省/市/区',
                mode: '',
                deepLength: 1,
                pickerValueDefault: [0],
                pickerValueArray:[],
				user:{
					consignee:'',// [str] [必填] [收货人]
					phone:'',
					province:'',//[str] [必填] [省]
					city:'',//        [str] [必填] [市]
					district:'',//    [str] [必填] [区]
					details:"",//     [str] [必填] [详址]
					default:'0',//     [int] [可选] [默认地址。1是0否]
					longitude:null,//经度
					latitude:null//纬度
				},
				IDcard:'',
				addressId:'',
				mapAddressName:'在地图上搜索并选择地址'
			}
		},
		components: {
            mpvueCityPicker
        },
		onLoad(e){
			console.log(e);
			var that=this;
			that.addressId=e.addressId;
			qqmapsdk = new QQMapWX({
			  key:'N76BZ-DTGKD-4TZ4H-PSTQQ-G2BCK-WWFZH'
			});
			if(that.addressId){
				ef.submit({
					request:{
						s:['USERADDRESSSELFGET',[{id:that.addressId}]]
					},
					callback(data){
						var dataList=fns.checkError(data,'s',function(errno,error){
							uni.showToast({
								title:error,
								icon:'none'
							})
						})
						console.log(dataList);
						that.user=dataList.s;
						var province=dataList.s.province
						var city=dataList.s.city
						var district=dataList.s.district
						that.pickerText=province+'-'+city+'-'+district
					},
					error(err){
						fns.err('err',err,1)
					}
				})
			}
		},
		methods: {
			// 三级联动选择
            showMulLinkageThreePicker() {
                this.$refs.mpvueCityPicker.show()
            },
			onConfirm(e) {
				console.log(e);
				var label=e.label;
			    this.pickerText = label;
				var labelArr=label.split('-');
				this.user.province=labelArr[0];
				this.user.city=labelArr[1];
				this.user.district=labelArr[2];
			},
			gosite(){
				var that=this
				uni.chooseLocation({
					success: function (res) {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						that.user.details=res.address;
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
					}
				});
			},
			openMap(){
				var _this=this;
				uni.chooseLocation({
					keyword:_this.user.details,
				    success: function (res) {
						console.log('res',res)
						
						_this.user.latitude=res.latitude
						_this.user.longitude=res.longitude
						_this.mapAddressName=res.name
				        console.log('经度：' + res.longitude);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
				    }
				});
				// if(_this.longitude && _this.latitude){
				// 	uni.openLocation({
				// 		
				// 	})
				// }else{
				// 	uni.openLocation({
				// 		
				// 	})
				// }
				
			},
			submit(){
				var info=this.user,_this=this;
				if(!info.consignee||!info.phone||!info.province||!info.city||!info.district||!info.details||!info.longitude||!info.latitude){
					uni.showToast({
						title:'有完成项',
						icon:'none'
					})
					return;
				}	
				uni.showLoading({
					title:'请稍等...'
				})
				if(_this.addressId){
					ef.submit({
						request:{
							add:['USERADDRESSSELFEDIT',[info]]
						},
						callback(data){
							var address=fns.checkError(data,'add',function(errno,error){
								uni.showToast({
									title:error,
									icon:'none'
								})
							})
							if(address.add){
								uni.showToast({
									title:'修改成功',
									success() {
										setTimeout(function(){
											uni.navigateBack({
												
											})
											// ({
											// 	url:'../address/address'
											// })
										},2000)
									}
								})
							}
						},
						error(err){
							fns.err('err',err,1)
						}
					})
				}else{
					ef.submit({
						request:{
							add:['USERADDRESSSELFADD',[info]]
						},
						callback(data){
							var address=fns.checkError(data,'add',function(errno,error){
								uni.showToast({
									title:error,
									icon:'none'
								})
							})
							if(address.add){
								uni.showToast({
									title:'添加成功',
									success() {
										setTimeout(function(){
											uni.navigateBack({
												
											})
											// ({
											// 	url:'../address/address'
											// })
										},2000)
									}
								})
							}
						},
						error(err){
							fns.err('err',err,1)
						}
					})
				}
			},
			switchBtn: function (e){
				var that=this;
				console.log('switch1 发生 change 事件，携带值为', e.target.value)
				if(e.target.value==true){
					that.user.default=1
				}else{
					that.user.default=0
				}
				console.log(that.user.default)
			}
		}
	}
</script>

<style>
	page{
		background-color:#FAFAFA;
	}
	.content{
		width: 100%;
		font-size: 28upx;
		padding-top: 40upx;
		color: #676769;
	}
	.box{
		width: 690upx;
		padding: 0 30upx;
		height: 80upx;
		line-height: 80upx;
		display: flex;
		margin-bottom: 20upx;
	}
	.box_left{
		width: 20%;
		height: 80upx;
	}
	.box_left_two{
		width: 550upx;
	}
	.box_right{
		width: 70%;
		height: 70upx;
		display: flex;
		
	}
	.box_right_right{
		width: 70%;
		height: 80upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.box_right_right input{
		width: 87%;
		height:70upx;
		line-height: 70upx;
		
	}
	.box_right_right image{
		width: 40upx;
		height: 40upx;
	}
	.box_right image{
		width: 40upx;
		height: 40upx;
		margin-top: 20upx;
		margin-left: 30upx;
	}
	.box_right_two{
		width: 150upx;
	}
	
	.box_right input{
		width: 97%;
		height: 100%;
		border: 1upx  #CCCCCC solid;
		border-radius: 15upx;
		padding-left: 3%;
		margin-top: 10upx;
		background-color: #FFFFFF;
	}
	.btn{
		width: 690upx;
		height: 90upx;
		line-height: 90upx;
		background-color: rgba( 242 155 135);
		color: #ffffff;
		font-size: 32upx;
		margin-top: 120upx;
	}
	.citybtn{
		width:auto;
		height: 60upx;
		overflow: hidden;
	}
</style>
